<!DOCTYPE html><!--商品详情-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/mainHeader::main_header('详情')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:replace="common/HeaderBlock::block"></div>
<section class="content-wrapper">
    <div class="content-container container">
        <div class="main">
            <div class="product-info-box">
                <div class="product-essential">
                    <div class="product-img-box">
                        <p class="product-image-zoom">
                            <img id="proImage" src="" alt="Image" title="Image"/>
                        </p>
                    </div>
                    <div class="product-shop">
                        <h3 class="product-name" id="proName"></h3>
                        <div class="price-box">
                            <span class="price" id="proPrice"></span>
                            <span class="availability" id="proStatus">有货</span>
                        </div>
                        <div class="model-block">
                            <p>
                                <span>库存： </span><span id="proStock"></span>
                            </p>
                            <p>
                                <span>类别：</span><span id="proCate"></span>
                            </p>
                        </div>
                        <div class="first-review" id="proDetail">
                            Be the first to review this product
                        </div>
                        <div class="add-to-cart-box">
									<span class="qty-box">
                                        <label for="count">购买数量：</label>
                                        <a href="javascript:void(0)" title="" class="prev jian">
                                            <img src="/static/images/qty_prev.png" title="" alt="sub" id="sub"/>
                                        </a>
                                        <input type="text" value="1" maxlength="12" id="count" class="input-text qty"
                                               name="qty">
                                        <a href="javascript:void(0)" title="" class="next dec add">
                                            <img src="/static/images/qty_next.png" title="" alt="add" id="add"/>
                                        </a>
									</span>
                            <button class="form-button" title="添加购物车" onclick="add()">
                                <span>添加购物车</span>
                            </button>
                        </div>
                        <span id="msg" style="color: red"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:replace="common/footer::footer"></div>
</body>
<script>
    const id = window.location.href.split('?')[1].split('=')[1];
    let total;
    $.ajax({
        type: 'GET',
        url: 'pro/proDetail',
        data: {
            'id': id
        },
        async: false,
        success: function (result) {
            const arr = result.data;
            const url = 'image/' + arr.mainImage;
            $('#proImage').attr('src', url);
            $('#proName').text(arr.name);
            $('#proPrice').text(arr.price);
            if (arr.stock > 0) {
                $('#proStatus').text('有货');
            } else {
                $('#proStatus').text('下架');
            }
            total = arr.stock;
            $('#proStock').text(arr.stock);
            $.ajax({
                type: 'GET',
                url: 'cate/cateName',
                data: {
                    'id': arr.categoryId
                },
                success: function (result1) {
                    $('#proCate').text(result1.msg);
                }
            });
            $('#proDetail').text(arr.detail);
        }
    });
    //input输入框
    const inp = $('#count');
    //点击事件
    $('#sub').click(function () {
        let count = inp.val();
        if (count <= 1) {
            count = 1;
        } else {
            count -= 1;
        }
        inp.val(count);
    });
    $('#add').click(function () {
        let count = parseInt(inp.val());
        if (count >= total) {
            count = total;
        } else {
            count += 1;
        }
        inp.val(count);
    });

    //提交
    function add() {
        let count = parseInt(inp.val());
        if (count > total) {
            inp.val(total);
            $('#msg').text('最多可下单' + total + '个');
            return false;
        }
        if (count < 1) {
            inp.val(1);
            $('#msg').text('数量不可以小于1');
            return false;
        }
        inp.val('');
        addCartPro(id,count);
        inp.val(1);
    }
</script>
<script>
    const ulBody = $('#ulBody');
    //先找到根类别
    $.ajax({
        type: 'GET',
        url: 'cate/listCate',
        async: false,
        success: function (result) {
            const data = result.data;//根分类
            for (let i = 0; i < data.length; i++) {
                const li1 = $('<li><a>' + data[i].name + '</a></li>');
                const ul1 = $('<ul></ul>');
                //由根分类id查找二级分类
                $.ajax({
                    type: 'GET',
                    url: 'cate/moreCate',
                    async: false,
                    data: {
                        'id': data[i].id
                    },
                    success: function (result1) {
                        const data1 = result1.data;//二级分类
                        for (let j = 0; j < data1.length; j++) {
                            ul1.append("<li><a href='product?id=" + data1[j].id + "'>" + data1[j].name + "</a></li>")
                        }
                    }
                });
                li1.append(ul1);
                ulBody.append(li1);
            }
        }
    });
</script>
<!--<script type="text/javascript">-->
<!--    jQuery(document).ready(function () {-->
<!--        jQuery(".ajax").colorbox();-->
<!--    });-->
<!--    jQuery(function () {-->
<!--        jQuery(".add")-->
<!--            .click(-->
<!--                function () {-->
<!--                    var jQueryadd = jQuery(this);-->
<!--                    var oldValue = jQueryadd-->
<!--                        .parent()-->
<!--                        .find(-->
<!--                            "input")-->
<!--                        .val();-->
<!--                    var newVal = 0;-->

<!--                    if (jQueryadd-->
<!--                        .text() === "") {-->
<!--                        newVal = parseFloat(oldValue) + 1;-->
<!--                    }-->
<!--                    jQueryadd-->
<!--                        .parent()-->
<!--                        .find(-->
<!--                            "input")-->
<!--                        .val(-->
<!--                            newVal);-->
<!--                });-->

<!--        jQuery(".jian")-->
<!--            .click(-->
<!--                function () {-->
<!--                    var jQueryadd = jQuery(this);-->
<!--                    var oldValue = jQueryadd-->
<!--                        .parent()-->
<!--                        .find(-->
<!--                            "input")-->
<!--                        .val();-->
<!--                    var newVal = 0;-->

<!--                    if (jQueryadd-->
<!--                        .text() === "") {-->
<!--                        newVal = parseFloat(oldValue) - 1;-->
<!--                    }-->
<!--                    if (newVal <= 0) {-->
<!--                        newVal = 1;-->
<!--                    }-->
<!--                    jQueryadd-->
<!--                        .parent()-->
<!--                        .find(-->
<!--                            "input")-->
<!--                        .val(-->
<!--                            newVal);-->
<!--                });-->

<!--    });-->
<!--</script>-->
</html>